<template>
	<view class="mpvue-picker">
		<!-- <view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
		<view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
			<view class="mpvue-picker__hd" catchtouchmove="true">
				<view class="mpvue-picker__action" @click="pickerCancel">取消</view>
				<view class="mpvue-picker__action" style="color: #000;">选择时间</view>
				<view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</view>
			</view> -->
		<picker mode="multiSelector" :value="valueArray" :range="rangeValues" @columnchange="handleColumnChange"
			@change="handleValueChange" @cancel="handleCancel">
			<slot></slot>
		</picker>
		<!-- 多列选择 -->
		<!-- <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" 
			:value="pickerValue" @change="pickerChange">
                <block v-for="(n,index) in pickerValueMulArray.length" :key="index">
                    <picker-view-column>
                        <view class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" 
						:key="index1">{{item.label}}</view>
                    </picker-view-column>
                </block>
            </picker-view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	const leftPad0 = function(v, n) {
		if (!v) {
			v = "";
		}
		let prefix = "";
		for (let i = 0; i < n; i++) {
			prefix += "0";
		}
		return (prefix + v).substr(-n);
	};
	const stringToDate = function(str) {
		str = str.replace(/-/g, "/");
		return new Date(str);
	};
	const isLeapYear = function(year) {
		if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
			return true;
		}
		return false;
	};
	const now = new Date();
	const years = [];
	const beginYear = 2000;
	for (var i = beginYear; i <= now.getFullYear(); i++) {
		years.push(i + "年");
	}
	const months = [];
	for (var i = 0; i < 12; i++) {
		months.push(leftPad0(i + 1, 2) + "月");
	}
	const days = [];
	for (var i = 0; i < 31; i++) {
		days.push(leftPad0(i + 1, 2) + "日");
	}
	const hours = [];
	for (var i = 0; i < 24; i++) {
		hours.push(leftPad0(i, 2) + "时");
	}
	const minutes = [];
	for (var i = 0; i < 60; i++) {
		minutes.push(leftPad0(i, 2) + "分");
	}
	const seconds = []
	for (var i = 0; i < 60; i++) {
		seconds.push(leftPad0(i, 2) + "秒");
	}
	export default {
		data() {
			return {
				valueArray: [0, 0, 0, 0, 0],
				rangeValues: [
					years,
					months,
					days,
					hours,
					minutes,
					seconds
				],
				pickerYear: beginYear,
				pickerMonth: 1,

				/* 是否显示控件 */
				showPicker: true,
			};
		},
		props: {
			dateValue: {
				type: Date
			},
			value: {
				type: String
				// default: method.format('yyyy/MM/dd hh:mm:ss')
			},
			type: {
				type: String,
				default: 'hours'
			}
		},
		created() {
			// 第二种方式通过组件的生命周期函数执行代码
			console.log("发起请求获取数据");
			this.valueArray = this._dateToValueArray(stringToDate(this.format('yyyy/MM/dd hh:mm:ss')))
			console.log('type---',this.type)
			if(this.type == 'years'){
				this.rangeValues = [
					years,
					months,
					days
				]
			}else{
				this.rangeValues = [
					years,
					months,
					days,
					hours,
					minutes,
					seconds
				]
			}
		},
		watch: {
			value(v) {
				this.valueArray = this._dateToValueArray(stringToDate(v))
			},
			dateValue(date) {
				this.valueArray = this._dateToValueArray(date)
			},
			valueArray(v) {
				this._settMonthDays(v[0] + beginYear, v[1] + 1);
			},
			type(v) {
				console.log('type---',v)
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			/**
			 * 日期格式化
			 * @param {*} fmt 日期格式 this.$method.format('yyyy/MM/dd hh:mm:ss')
			*/
			format (fmt) {
			  if (fmt) {
				fmt = fmt.replace('H', 'h').replace('H', 'h')
			  }
			  let o = {
				'M+': new Date().getMonth() + 1, // 月份
				'd+': new Date().getDate(), // 日
				'h+': new Date().getHours(), // 小时
				'm+': new Date().getMinutes(), // 分
				's+': new Date().getSeconds(), // 秒
				'q+': Math.floor((new Date().getMonth() + 3) / 3), // 季度
				'S': new Date().getMilliseconds() // 毫秒
			  }
			  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (new Date().getFullYear() + '').substr(4 - RegExp.$1.length))
			  for (let k in o) {
				if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
			  }
			  return fmt
			},
			_dateToValueArray(date) {
				return [date.getFullYear() - beginYear, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes(), date.getSeconds()];
			},
			_settMonthDays(year, month) {
				let monthDays = 31;
				switch (month) {
					case 2:
						monthDays = 28;
						if (isLeapYear(year)) {
							monthDays = 29;
						}
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						monthDays = 30;
						break;
				}
				let days = [];
				for (let i = 0; i < monthDays; i++) {
					days.push(leftPad0(i + 1, 2) + "日");
				}
				this.pickerYear = year
				this.pickerMonth = month
				this.rangeValues[2] = days
			},
			handleCancel(e) {
				this.valueArray = this.valueArray
			},
			handleColumnChange(e) {
				if (e.detail.column > 1) return false;
				let year = this.pickerYear;
				let month = this.pickerMonth;
				if (e.detail.column == 0) {
					year = e.detail.value + beginYear;
				} else if (e.detail.column == 1) {
					month = e.detail.value + 1;
				}
				this._settMonthDays(year, month);
			},
			handleValueChange(e) {
				console.log(e.detail.value)
				let dateArr = [];
				for (let i in e.detail.value) {
					let v = this.rangeValues[i][e.detail.value[i]];
					if (v) {
						dateArr.push(v.toString().substr(0, v.length - 1))
					}
				}
				let dateString = ''
				if(this.type == 'years'){
					dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2];
				}else{
					dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4] + ":" + dateArr[5];
				}
				this.$emit('change', {
					date: stringToDate(dateString),
					dateString
				})
			}
		}
	}
</script>

<style>
	.mpvue_active {
		background: #53B2B0;
		color: #fff;
	}

	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: rgba(255, 255, 255, 1);
	}
</style>